<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle ?: '同步平台 - 编辑服务器'}">同步平台 - 编辑服务器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar Navigation -->
            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/}">
                                <i class="bi bi-house"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/dashboard}">
                                <i class="bi bi-speedometer2"></i> 仪表盘
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" th:href="@{/server}">
                                <i class="bi bi-server"></i> 服务器管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/database}">
                                <i class="bi bi-database"></i> 数据库管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/database}">
                                <i class="bi bi-arrow-left-right"></i> 数据库同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/file}">
                                <i class="bi bi-files"></i> 文件同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/task/log}">
                                <i class="bi bi-list-check"></i> 同步日志
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            
            <!-- Main Content -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2" th:text="${server.id != null ? '编辑服务器' : '添加服务器'}">编辑服务器</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a th:href="@{/server}" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-arrow-left"></i> 返回列表
                        </a>
                    </div>
                </div>
                
                <!-- Server Form -->
                <div class="card">
                    <div class="card-body">
                        <form id="serverForm" th:object="${server}">
                            <input type="hidden" th:field="*{id}" />
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">服务器名称</label>
                                    <input type="text" class="form-control" id="name" th:field="*{name}" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="host" class="form-label">主机地址</label>
                                    <input type="text" class="form-control" id="host" th:field="*{host}" required>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="port" class="form-label">SSH端口</label>
                                    <input type="number" class="form-control" id="port" th:field="*{port}" value="22" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="username" th:field="*{username}" required>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="password" class="form-label">密码</label>
                                    <input type="password" class="form-control" id="password" th:field="*{password}" th:required="${server.privateKeyPath == null || server.privateKeyPath.empty}">
                                    <div class="form-text">如果使用SSH密钥，可以留空</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="privateKeyPath" class="form-label">SSH私钥路径</label>
                                    <input type="text" class="form-control" id="privateKeyPath" th:field="*{privateKeyPath}">
                                    <div class="form-text">如果使用密码登录，可以留空</div>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="transferType" class="form-label">传输类型</label>
                                    <select class="form-select" id="transferType" name="transferType" th:field="*{transferType}">
                                        <option value="ssh" th:selected="${server.transferType == null || server.transferType == 'ssh'}">SSH/SFTP</option>
                                        <option value="ftp" th:selected="${server.transferType == 'ftp'}">FTP</option>
                                    </select>
                                    <div class="form-text">选择服务器文件传输使用的协议类型</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="description" class="form-label">描述</label>
                                    <textarea class="form-control" id="description" th:field="*{description}" rows="3"></textarea>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between">
                                <div>
                                    <button type="button" id="testConnectionBtn" class="btn btn-info">
                                        <i class="bi bi-check-circle"></i> 测试连接
                                    </button>
                                </div>
                                <div>
                                    <a th:href="@{/server}" class="btn btn-secondary">取消</a>
                                    <button type="button" id="saveBtn" class="btn btn-primary">
                                        <i class="bi bi-save"></i> 保存
                                    </button>
                                </div>
                            </div>
                        </form>
                        
                        <!-- Connection Test Result -->
                        <div id="connectionTestResult" class="mt-3"></div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
    <script th:src="@{/js/script.js}"></script>
    
    <script>
        $(document).ready(function() {
            // Save server
            $('#saveBtn').on('click', function() {
                // Form validation
                if (!$('#serverForm')[0].checkValidity()) {
                    $('#serverForm')[0].reportValidity();
                    return;
                }
                
                // Get form data as JSON
                const formData = {
                    id: $('#id').val(),
                    name: $('#name').val(),
                    host: $('#host').val(),
                    port: parseInt($('#port').val()),
                    username: $('#username').val(),
                    password: $('#password').val(),
                    privateKeyPath: $('#privateKeyPath').val(),
                    transferType: $('#transferType').val(),
                    description: $('#description').val()
                };
                
                $.ajax({
                    url: '/server/save',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(response) {
                        if (response.success) {
                            window.location.href = '/server';
                        } else {
                            alert('保存失败: ' + response.message);
                        }
                    },
                    error: function() {
                        alert('请求失败，请稍后再试。');
                    }
                });
            });
            
            // Test connection
            $('#testConnectionBtn').on('click', function() {
                // Form validation
                if (!$('#host').val() || !$('#port').val() || !$('#username').val()) {
                    alert('请填写主机地址、端口和用户名');
                    return;
                }
                
                // Get form data as JSON
                const formData = {
                    id: $('#id').val(),
                    name: $('#name').val(),
                    host: $('#host').val(),
                    port: parseInt($('#port').val()),
                    username: $('#username').val(),
                    password: $('#password').val(),
                    privateKeyPath: $('#privateKeyPath').val(),
                    transferType: $('#transferType').val()
                };
                
                $('#connectionTestResult').html('<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>');
                
                $.ajax({
                    url: '/server/test',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(response) {
                        if (response.success) {
                            $('#connectionTestResult').html('<div class="alert alert-success">连接成功!</div>');
                        } else {
                            $('#connectionTestResult').html('<div class="alert alert-danger">连接失败: ' + response.message + '</div>');
                        }
                    },
                    error: function() {
                        $('#connectionTestResult').html('<div class="alert alert-danger">请求失败，请稍后再试。</div>');
                    }
                });
            });
        });
    </script>
</body>
</html> 